---
import { Observed, Section, SectionHeadline } from "#components/fragments";
import { Image } from "#components/primitives";
import { mdiPlayCircle } from "@mdi/js";
import { IconButton } from "#components/primitives";
import searchImageDark from "#assets/images/dark/search.png";
import searchImageLight from "#assets/images/light/search.png";
import searchSmallImageDark from "#assets/images/dark/search-small.png";
import searchSmallImageLight from "#assets/images/light/search-small.png";
---

<Section>
  <SectionHeadline
    title="Find anything"
    subtitle="AI-powered, built-in semantic search to get all the answers."
  />
  <div class="relative md:pr-16">
    <div class="grid-background -z-1 !h-[150%] !w-[200%] !-top-[25%] !-left-[50%]"></div>

    <Observed
      client:visible
      class="transition-all duration-500 ease-out"
      outOfViewClass="invisible translate-y-16 opacity-0"
      immediate
    >
      <div
        class="h-full w-[calc(100%-4rem)] top-0 left-0 absolute bg-gray-50 dark:bg-gray-800 rounded-2xl"
      >
      </div>
      <Image
        alt="Vrite search palette"
        srcDark={searchImageDark}
        srcLight={searchImageLight}
        class="rounded-2xl border-2 border-gray-200 dark:border-gray-700 gradient-image-mask"
      />
    </Observed>
    <Observed
      client:visible
      class="transition-all delay-250 duration-500 ease-out rounded-2xl absolute -bottom-32 -right-4 w-2/3 xl:-right-16 md:w-1/2"
      outOfViewClass="invisible translate-y-16 opacity-0"
      immediate
    >
      <div class="absolute top-0 left-0 h-full w-full bg-gray-50 dark:bg-gray-800 rounded-2xl">
      </div>
      <Image
        alt="Vrite Q&A search"
        srcDark={searchSmallImageDark}
        srcLight={searchSmallImageLight}
        class="rounded-2xl border-2 border-gray-200 dark:border-gray-700 gradient-image-mask"
      />
    </Observed>
  </div>
  <div
    class="text-lg md:text-2xl text-gray-600 dark:text-gray-200 md:max-w-1/2 pt-0 z-1 mt-12 md:-mt-12"
  >
    <p>
      Built-in semantic search and Q&A powered by the latest LLMs, lets you find an answer in your
      content to any question you might have. And with Vrite's API, you can provide the same
      experience to your users.
    </p>
    <div class="flex justify-start mt-2">
      <IconButton
        path={mdiPlayCircle}
        link="https://docs.vrite.io"
        target="_blank"
        class="m-0"
        label="Experience search in Vrite docs"
        color="primary"
        text="base"
        variant="text"
      />
    </div>
  </div>
</Section>
